<template>
    <div class="invest-manage">
        <el-tabs v-model="activeKey" type="card" closable @tab-remove="removeTab">
            <el-tab-pane name="result" v-if="checkPermission('B_0407')">
                <span slot="label"><i class="el-icon-discover"></i> 指令信息</span>
                <InstInfomation @handelOperate="handelOperate" />
            </el-tab-pane>
            <el-tab-pane name="invest-summary-result" v-if="checkPermission('B_0408')">
                <span slot="label"><i class="el-icon-discover"></i> 指令汇总结果</span>
                <InvestSummaryResult @handelOperate="handelOperate" />
            </el-tab-pane>
            <el-tab-pane name="result-history" v-if="checkPermission('B_0409')">
                <span slot="label"><i class="el-icon-tickets"></i>历史指令信息 </span>
                <InstInfomation @handelOperate="handelOperate" :type="historyStr" />
            </el-tab-pane>
            <el-tab-pane name="invest-summary-result-history" v-if="checkPermission('B_0410')">
                <span slot="label"><i class="el-icon-tickets"></i> 历史指令汇总结果</span>
                <InvestSummaryResult @handelOperate="handelOperate" :type="historyStr" />
            </el-tab-pane>
            <el-tab-pane v-for="item in panes" :key="item.key" :name="item.key">
                <span slot="label"><i class="el-icon-discover"></i>{{ item.title }} </span>
                <InstReportDetail :staticResult="item.value" :history="item.history" style="padding: 20px"></InstReportDetail>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { checkPermission } from '@/utils/tools';
import { Vue, Component } from 'vue-property-decorator';
import InstInfomation from './invest-manage/inst-infomation.vue';
import InstReportDetail from './invest-manage/Inst-report-detail.vue';
import InvestSummaryResult from './invest-manage/invest-summary-result.vue';

@Component({ name: 'InvestManage', components: { InstInfomation, InstReportDetail, InvestSummaryResult } })
export default class InvestManage extends Vue {
    private activeKey: string = 'result';

    private historyStr: string = 'history'; // 历史指令信息

    // private history: boolean = false;

    private panes: any[] = []; // 所有tabs标签页

    private staticResult: any = {}; // 当前指令结果数据

    checkPermission = checkPermission;

    mounted() {
        if (!checkPermission('B_0407') && checkPermission('B_0408')) {
            this.activeKey = 'invest-summary-result';
        } else if (!checkPermission('B_0407') && !checkPermission('B_0408') && checkPermission('B_0409')) {
            this.activeKey = 'result-history';
        } else if (!checkPermission('B_0407') && !checkPermission('B_0408') && !checkPermission('B_0409') && checkPermission('B_0410')) {
            this.activeKey = 'invest-summary-result-history';
        }
    }

    // 指令结果详情
    private handelOperate({ record, history, clickRecord }): void {
        // this.history = history;
        let parentRecord = clickRecord;
        console.log(parentRecord, '指令行');
        let key = String(record.resultId + '-' + record.entryCode);

        for (let i = 0; i < this.panes.length; i++) {
            if (this.panes[i].key === key) {
                this.activeKey = key;
                return;
            }
        }
        this.panes.push({ title: key, key: key, value: JSON.parse(JSON.stringify(record)), history: history });
        this.activeKey = key;
    }

    // 移除tabs
    private removeTab(targetKey: string): void {
        let lastIndex;
        this.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        this.panes = this.panes.filter(pane => pane.key !== targetKey);
        if (this.panes.length && this.activeKey === targetKey) {
            if (lastIndex >= 0) {
                this.activeKey = this.panes[lastIndex].key;
            } else {
                this.activeKey = this.panes[0].key;
            }
        }
        if (this.panes.length === 0) {
            this.activeKey = 'result';
        }
    }
}
</script>
<style lang="scss" scoped>
.invest-manage {
    min-width: 1000px;
    background: #fff;
    padding-top: 10px;
    height: 100%;
}
.invest-manage /deep/ .el-tabs .el-tabs__nav .el-tabs__item {
    line-height: 34px;
    padding: 0 25px;
}

.invest-manage /deep/ .el-tabs .el-tabs__nav .el-tabs__item span {
    border-right: 0px solid #fff;
}

.invest-manage /deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(1) .el-icon-close {
    display: none;
}

.invest-manage /deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(2) .el-icon-close {
    display: none;
}

/deep/ .el-tabs {
    height: 100%;
    .el-tabs__header {
        min-width: auto;
    }
    .el-tabs__content {
        height: calc(100% - 40px);
        overflow: auto;
        .el-tab-pane {
            height: 100%;
        }
    }
}

/deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(1) .el-icon-close,
/deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(2) .el-icon-close,
/deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(3) .el-icon-close,
/deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(4) .el-icon-close {
    display: none;
}
</style>
